<template>
	<view class="w-100 h-100 bg-white">
		<view class="head bg-white">
			<view class="flex flex-column align-center justify-center">
				<u-image
					width="150rpx"
					height="150rpx"
					mode="widthFix"
					src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=430831991,3934852139&fm=11&gp=0.jpg"
				></u-image>
				<view class="text-bold text-lg margin-top-sm margin-bottom-sm">天气预报</view>
				<view class="text-color-base margin-bottom-lg" style="text-indent: 1em;padding: 0 20rpx;">
					该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
				</view>
			</view>
		</view>
		<u-gap height="15" bg-color="#eeeeee"></u-gap>
		<view class="body bg-white">
			<view style="height: 10%;">
				<u-tabs-swiper active-color="#ED5346" ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper style="height: 90%;" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<view class="cu-form-group">
						<u-form-item label-position="top" label="如果天气为 ? 的时候才提醒你">
							<u-checkbox-group>
								<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
					</view>
					<view @click="showTimePicker = true" class="cu-form-group">
						将在什么时间提醒您
						<input v-model="whenNotify" disabled class="text-right" placeholder="when?" name="input" />
						<u-picker @confirm="pickerConfirm" v-model="showTimePicker" :params="params" :show-time-tag="false" mode="time">123</u-picker>
						<text class="cuIcon-right text-gray"></text>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="width: 100%;height: 100%;" @scrolltolower="onreachBottom">
						<view class="grad radius shadow-warp bg-white" v-for="i in 5">
							<view class="bg-white item-address-name">
								<u-icon color="#ED5346" name="gift-fill"></u-icon>
								<text class="margin-left-xs">
									情人节兑换码
									<text class="margin-left-xs">2月15日亲测有效</text>
								</text>
							</view>
							<view class="flex flex-wrap item-body">
								<view class="basis-xl flex">
									<text>兑换码：</text>
									<view style="color: #3f67f5;">
										AFK888
										<u-icon class="margin-left-xs" color="#3f67f5" name="file-text"></u-icon>
									</view>
								</view>
								<view class="basis-xl  "><text>礼包内容：钻石x200金币x200k</text></view>
								<view class="basis-xl  "><text>有效期：2012-12-10 12:00:00</text></view>
							</view>
							<!-- <view class="line-red">状态：审核通过</view> -->
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '订阅'
				},
				{
					name: '历史推送'
				}
			],
			current: 0,
			swiperCurrent: 0,
			tabs: [{}, {}],
			params: {
				hour: true,
				minute: true
			},
			showTimePicker: false,
			whenNotify: '',
			checkboxList: [
				{
					name: '晴',
					checked: true,
					disabled: false
				},
				{
					name: '多云',
					checked: true,
					disabled: false
				},
				{
					name: '阴',
					checked: true,
					disabled: false
				},
				{
					name: '雨',
					checked: true,
					disabled: false
				},
				{
					name: '雪',
					checked: true,
					disabled: false
				},
				{
					name: '霾',
					checked: true,
					disabled: false
				},
				{
					name: '雾',
					checked: true,
					disabled: false
				}
			]
		};
	},
	methods: {
		pickerConfirm(e) {
			this.whenNotify = e.hour + ':' + e.minute;
		},
		// tabs通知swiper切换
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		// scroll-view到底部加载更多
		onreachBottom() {}
	}
};
</script>

<style>
.head {
	height: 25%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
}
.body {
	height: 73%;
}
.grad {
	width: 95%;
	margin: 0px auto 15upx;
	/* border: 1px solid red; */
}

.grad:nth-of-type(1) {
	margin-top: 20rpx;
}

.item-address-name {
	border-bottom: 1px solid rgba(200, 200, 200, 0.4);
	padding: 15upx 0px 15upx 30upx;
	font-size: 30upx;
	font-weight: 700;
	color: #000000;
}
.item-body {
	padding-left: 28upx;
	line-height: 55upx;
	font-size: 25upx;
	color: #000000;
}
.cuIcon-title,
.cuIcon-time {
	margin-right: 15upx;
}
.line-red {
	padding-left: 31upx;
	line-height: 55upx;
	font-size: 25upx;
}
.shadow-warp:after,
.shadow-warp:before {
	display: none;
}
</style>
